<template>
  <div class="goods-item">
    <el-form :model="params" ref="ruleForm" label-width="110px" size="small">
      <el-row class="item-title"><h3>基本信息</h3></el-row>
      <el-row class="wrap">
        <el-form-item label="系统分类" prop="typeId"
          :rules="[{ required: true, message: '系统分类未选', trigger: 'change'}]">
          <el-cascader expand-trigger="hover" clearable :options="classlist"
              :show-all-levels="false" placeholder="主分类，必选" v-model="params.typeId"
              :props="classlistAlias" />
        </el-form-item>

        <el-form-item label="店内分类" prop="shopTypeId"
          :rules="[{ required: true, message: '店内分类未选', trigger: 'change'}]">
          <el-select clearable v-model="params.shopTypeId" placeholder="请为商品选择店内分类">
            <el-option v-for="items in busClassList"
              :key="'busClassList'+items.id"
              :label="items.name" :value="items.id" />
          </el-select>
          <el-button type="text" style="margin-left: 10px;" @click="addBusClass()"><span style="color: #2196F3;">新建分类</span></el-button>
        </el-form-item>

        <el-form-item label="商品名称" prop="goodsName"
          :rules="[{ required: true, message: '商品名称未填', trigger: 'blur'},
            {min: 1, max: 200, message: '商品名称长度在 1 到 200 个字符', trigger: 'change'}]">
          <el-input type="textarea" clearable :rows="2" v-model="params.goodsName" placeholder="请输入商品名称" style="width: 400px;"/>
        </el-form-item>

        <el-form-item label="商品编码" prop="goodsNum" 
          :rules="[{ required: true, message: '商品编号未填', trigger: 'blur'},
            {min: 8, max: 50, message: '商品编号长度在 8 到 50位', trigger: 'change'}]">
          <el-input type="text" clearable v-model="params.goodsNum" placeholder="请输入商品编号" style="width: 215px;"/>
        </el-form-item>

       <el-form-item label="商品图片" prop="goodsImg" :rules="[{ required: true, type: 'array', message: '未添加商品图片', trigger: 'change'}]">
         <ul class="img-list">
           <li class="img" v-for="(item, index) in params.goodsImg" :key="item.id">
             <img :src="`http://image.jiaowawang.cn/${item}`" />
             <div class="del" @click="params.goodsImg.splice(index, 1)"><i class="el-icon-error"></i></div>
           </li>
           <li class="img" @click="openImgDialog(1)"><i class="el-icon-plus"></i>加图</li>
         </ul>
         <p class="add-goods-help">建议尺寸：640 x 640 像素。</p>
        </el-form-item>
      </el-row>

      <el-row class="item-title">库存/规格</el-row>
      <el-row class="wrap">
        <el-form-item label="规格设置" prop="activesku" :rules="[{validator: valActivesku, trigger: ['blur', 'change']}]">
          <div class="fromat">
            <div class="sku-item" v-for="(item, index) in params.activesku" :key="item.id">
              <div class="sku-item__title flex-row">
                <div class="title">规格名：</div>
                <el-select v-model="item.id" @change="setSku($event, index)" filterable placeholder="可在这输入添加或查询规格">
                  <el-option v-for="list in $options.filters.filterSku(formatList, params.activesku, item.id)" :key="list.id" :label="list.name" :value="list.id" />
                </el-select>
                <el-checkbox style="margin-left: 10px;" v-if="index == 0" v-model="params.hasImage">添加规格图片</el-checkbox>
                <div class="del-sku" @click="delSku(index)"><i class="el-icon-error"></i></div>
              </div>
              <div class="sku-item__content">
                <div class="title">属性值：</div>
                <div class="sku-list">
                  <div class="item" :class="{'active': index == 0 && params.hasImage}"
                    v-for="(list, l) in item.sid" :key="'sku-sub-list' + l">
                    <div class="del" @click="delSubSku(index, l)"><i class="el-icon-error"></i></div>
                    <el-select v-model="list.id"
                      filterable style="width: 160px;"
                      @change="setSunSku($event, index, item.id, l)"
                      placeholder="可输入添加">
                      <el-option v-for="list in $options.filters.getSubOption(formatList, item.id, list.id, item.sid)" 
                        :key="list.id" :label="list.name" :value="list.id" />
                    </el-select>
                    <div class="upload-img-wrap" v-if="index == 0 && params.hasImage">
                      <div class="arrow"></div>
                      <div class="rc-upload" @click="openImgDialog(2,l)">
                        <div class="img-wrap flex-row-ver" v-if="list.img">
                          <img :src="`http://image.jiaowawang.cn/${list.img}`" />
                        </div>
                        <div class="add flex-row-ver" v-if="!list.img"><i class="el-icon-plus"></i></div>
                      </div>
                    </div>
                  </div>
                  <el-button v-if="item.id" type="text" style="margin-left: 10px;" @click="addMoreSkuSub(index)">添加</el-button>
                  <el-button type="text" v-if="item.id" style="color: #2196F3;" @click.stop="opSubSku($event, item.id)">新建属性值</el-button>
                </div>
              </div>
              <p class="add-goods-help" v-if="index == 0 && params.hasImage">建议尺寸：150 x 150 像素。</p>
            </div>
            <div class="sku-item">
              <div class="sku-item__title flex-row">
                <el-button size="mini" :disabled="params.activesku.length >= 3" @click="addMoreSku()">添加规格</el-button>
                <el-button size="mini" type="text" style="color: #2196F3;" @click.stop="addNewsku($event)">新建规格</el-button>
              </div>
            </div>
            <p class="add-goods-help">如有颜色、尺码等多种规格，请添加商品规格。</p>
          </div>
        </el-form-item>
       
        <el-form-item label="规格明细" v-if="params.goodsSkus.length" prop="goodsSkus" :rules="[{validator: valGoodsSkus, trigger: ['blur', 'change']}]">
          <!--笛卡尔积表格-->
          <el-table :data="params.goodsSkus" border style="width: 100%"
            :header-cell-style="{'background':'#fff'}" :span-method="arraySpanMethod">
            <!-- 自定义部分 -->
            <el-table-column v-for="(col, i) in $options.filters.showTtitle(params.activesku)" :key="i" :label="col.name" min-width="60px">
              <template slot-scope="scope">
                <span>{{scope.row.ids[i].name}}</span>
              </template>
            </el-table-column>
            <!-- 固定写死的部分 -->
            <el-table-column min-width="120px">
              <template slot="header" slot-scope="scope">
               <span type="flex"><i style="color: red; margin: 0 5px;">*</i>售价</span>
              </template>
              <template slot-scope="scope">
                <el-input-number style="width: 90%" :precision="2" :min="0.01" size="mini" v-model="params.goodsSkus[scope.$index].price" />
              </template>
            </el-table-column>

            <el-table-column min-width="120px">
              <template slot="header" slot-scope="scope">
               <span type="flex">
                 <i style="color: red; margin: 0 5px;">*</i>库存
                 <el-tooltip class="item" effect="dark" content="此处库存仍然为商品的可售卖库存，可以直接进行修改，修改后，买家看到的商品可售库存数量会进行变化" placement="top-start">
                    <el-button type="text" icon="el-icon-question"></el-button>
                  </el-tooltip>
                </span>
              </template>
              <template slot-scope="scope">
                <el-input-number style="width: 90%" :precision="0" :min="0" size="mini" v-model="params.goodsSkus[scope.$index].stock" />
              </template>
            </el-table-column>

             <el-table-column min-width="120px">
              <template slot="header" slot-scope="scope">
                <span type="flex">市场价格
                  <el-tooltip effect="dark" content="成本价未来会用于营销建议，利润分析等" placement="top-start">
                    <el-button type="text" icon="el-icon-question"></el-button>
                  </el-tooltip>
                </span>
              </template>
              <template slot-scope="scope">
                <el-input-number style="width: 90%" :precision="2" :min="0" size="mini" v-model="params.goodsSkus[scope.$index].cost" />
              </template>
            </el-table-column>

            <el-table-column min-width="120px">
              <template slot="header" slot-scope="scope">
                <span type="flex">规格编码
                  <el-tooltip class="item" effect="dark" content="为方便管理，可以自定规格编码，比如货号" placement="top-start">
                    <el-button type="text" icon="el-icon-question"></el-button>
                  </el-tooltip>
                </span>
              </template>
              <template slot-scope="scope">
                <el-input style="width: 90%" size="mini" v-model="params.goodsSkus[scope.$index].goodsnum" />
              </template>
            </el-table-column>
            <el-table-column  min-width="120px">
              <template slot="header" slot-scope="scope">
                <span>虚拟销量
                  <el-tooltip class="item" effect="dark" content="设置商品的起始销量,最大可设置1000" placement="top-start">
                    <el-button type="text" icon="el-icon-question"></el-button>
                  </el-tooltip>
                </span>
              </template>
              <template slot-scope="scope">
                <el-input-number style="width: 90%" :precision="0" :min="0" :max="1000" size="mini" v-model="params.goodsSkus[scope.$index].salesvolume" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        
        <el-form-item label="售价" prop="price" v-if="params.goodsSkus.length === 0" :rules="[{ required: true, message: '售价未填', trigger: ['blur', 'change']}]">
          <el-input-number style="width: 160px" size="mini" v-model="params.price" :precision="2" :min="0.01" :disabled="params.goodsSkus.length > 0" />
        </el-form-item>
        <el-form-item label="库存" v-if="params.goodsSkus.length === 0" :rules="[{ required: true, message: '库存不能为空', trigger: ['blur', 'change']}]">
          <el-input-number style="width: 160px" prop="stock" v-model="params.stock" size="mini" :precision="0" :min="0" :disabled="params.goodsSkus.length > 0" />
          <span class="add-goods-help">此处库存仍然为商品的可售卖库存，可以直接进行修改，修改后，买家看到的商品可售库存数量会进行变化</span>
        </el-form-item>
        <el-form-item label="市场价格" v-if="params.goodsSkus.length === 0" :rules="[{ required: true, message: '库存不能为空', trigger: ['blur', 'change']}]">
          <el-input-number style="width: 160px" prop="stock" v-model="params.cost" size="mini" :precision="0" :min="0" :disabled="params.goodsSkus.length > 0" />
          <span class="add-goods-help">成本价未来会用于营销建议，利润分析等</span>
        </el-form-item>
        <el-form-item label="虚拟销量" v-if="params.goodsSkus.length === 0" >
          <el-input-number style="width: 160px" size="mini" v-model="params.saleCount" :precision="0" :min="0" :max="1000" :disabled="params.goodsSkus.length > 0" />
          <span class="add-goods-help">设置商品的起始销量,最大可设置1000</span>
        </el-form-item>
       <el-form-item label="库存展示">
          <el-checkbox style="margin-left: 10px;" v-model="params.showStock">页面不显示商品库存</el-checkbox>
        </el-form-item>
      </el-row>
      <el-row class="item-title">物流信息</el-row>
      <el-row class="wrap">
        <el-form-item label="配送方式" prop="distributionmodestr"
          :rules="[{ type: 'array', required: true, message: '请选择配送方式', trigger: 'change'}]">
            <el-checkbox-group v-model="params.distributionmodestr" >
              <el-checkbox v-for="item in payMethoy" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>

        <el-form-item label="快递运费"
          :rules="[{ type: 'array', message: '请选择配送方式', trigger: 'blur'}]">
          <el-radio-group v-model="params.freightfMode">
            <el-radio :label="1">统一邮费</el-radio>
            <el-radio :label="2">运费模板</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="运费" prop="freight" v-if="params.freightfMode === 1" 
          :rules="[{ required: true, message: '请输入统一运费', trigger: 'blur'}]">
          <el-input-number style="width: 160px" v-model="params.freight" size="mini" :precision="2" :min="0" /> {{comConfig.unit}}
        </el-form-item>

        <el-form-item label="运费模板" prop="freightTemplateId"  v-if="params.freightfMode === 2"
          :rules="[{ required: true, message: '请输入选择运费模板', trigger: 'change'}]">
          <el-select v-model="params.freightTemplateId" filterable :rules="[{ required: true, message: '请选择运费模板', trigger: 'change'}]">
            <el-option v-for="item in freightTemplateList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-button type="text" style="margin-left: 10px;" @click="addNewTemplate()"><span style="color: #2196F3;">新建模板</span></el-button>
          <el-button type="text" style="margin-left: 10px;" @click="getFreightTemplateList('reast')" :loading="reastLoading"><span style="color: #FF9800;">刷新数据</span></el-button>
        </el-form-item>
      </el-row>

      <el-row class="item-title">其他信息</el-row>
      <el-row class="wrap">
        <el-form-item label="上架方式">
          <el-radio-group v-model="params.groundingMode">
            <el-radio :label="1">立即上架销售</el-radio>
            <el-radio :label="2">自定义上架时间</el-radio>
            <el-radio :label="3">暂不上架，放入仓库</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="上架时间" prop="groundingDate" v-if="params.groundingMode === 2"
            :rules="[{ required: true, message: '请输入自定义上架时间', trigger: 'change'}]">
            <el-date-picker v-model="params.groundingDate" type="date" value-format="yyyy-MM-dd hh:ss:mm" format="yyyy-MM-dd hh:ss:mm" placeholder="请选择">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="商品详情">
          <div class="flex">
            <div>
              <vue-html5-editor class="goods-disc" :content="params.goodsDesc" @change="updateData" />
            </div>
            <div style="margin-left: 20px;">
              <el-button type="primary" plain @click="isShowGoodsDisc = true">导入预设模板</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item style="margin-top: 40px;">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <div class="sc-diy-pop" @click.stop v-if="isShowOpenSubSku" :style="{'top': top+ 'px', 'left': left+ 'px'}">
      <i class="sc-diy-pop-arrow"></i>
      <div class="sc-diy-inner">
        <div class="sc-diy-pop-content">
          <el-input type="text" v-model="subTitleName" clearable placeholder="请输入新的规格属性" />
        </div>
        <div class="sc-diy-pop-buttons">
          <el-button type="primary" @click="changeSubFormt" :loading="isSubmitButton" size="mini">确定</el-button>
          <el-button size="mini" @click="isShowOpenSubSku = false">取消</el-button>
        </div>
      </div>
    </div>
    <div class="sc-diy-pop" @click.stop v-if="isShowOpenSku" :style="{'top': top+ 'px', 'left': left+ 'px'}">
      <i class="sc-diy-pop-arrow"></i>
      <div class="sc-diy-inner">
        <div class="sc-diy-pop-content">
          <el-input type="text" v-model="subTitleName" clearable placeholder="请输入新的规格" />
        </div>
        <div class="sc-diy-pop-buttons">
          <el-button type="primary" @click="changeFormt" :loading="isSubmitButton" size="mini">确定</el-button>
          <el-button size="mini" @click="isShowOpenSku = false">取消</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="商品详情模板" v-dialogDrag :visible.sync="isShowGoodsDisc" :modal="true" width="1160px">
      <pt-goods-disc :size="10" :busniessId="$route.query.id" isEdit @chooseTemplate="chooseTemplate" />
    </el-dialog>
    <el-dialog :title="$route.query.id ? '商家相册(请勿随意修改)': '相册'"
      v-dialogDrag :visible.sync="isShowPhoto" :modal="true" width="1160px">
      <pt-photo :size="23" :busniessId="$route.query.id" @choseImg="choseImg" />
    </el-dialog>
    <el-dialog title="新建店内分类" v-dialogDrag :visible.sync="isShowBusClass" width="500px">
      <el-form :model="$data" ref="busClass" label-position="top">
        <el-form-item label="分类名称:" prop="busClassName" :rules="[{request: true,message: '店内分类名称未填', target: 'blur'}]">
          <el-input v-model="busClassName" type="text" placeholder="请输入店内分类名称" />
        </el-form-item>
      </el-form>
      <span slot="footer" style="text-align: right;">
        <el-button @click="isShowBusClass = false">取 消</el-button>
        <el-button type="primary" v-loading="isSubmitButton" @click="subMitBusClass('busClass')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import mixin from './minxs/addGoods'
  export default {
    mixins: [mixin]
  }
</script>
<style lang="scss" scoped>
  @import "./scss/addGoods.scss";
</style>
